import React, { Component } from 'react';

import { List, InputItem, Button, Flex, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import '../css/common.css';
import '../css/register.css';

class companyReg extends Component {
  // get code
  idencode=()=>{
    let formData = new FormData();
    let phone = this.props.form.getFieldValue('phone');
    if( typeof(phone)==="undefined" ){
      Toast.info('请输入正确手机号码，才能获取验证码！',2);
    }else{
      phone = phone.replace(/\s+/g, "");
      formData.append("phone",phone);
      fetch('http://58.220.10.23:8001/api/sms/sendCheckCodeWhenRegister', {
        method: 'POST',
        credentials: 'include',
        body: formData,
      }).then(response => response.json())
      .then(data=>{
         if( data.status==0 ){
           Toast.success('验证码获取成功！', 2);
         }else{
           Toast.fail(data.errorMsg, 2);
         }
      })
    }
  }

  regBorrow=()=>{
    this.props.form.validateFields((error, value) => {
      if( error ){
        Toast.info('请填写完整的信息 !!!', 2);
        return;
      }else{
        if( value.password!==value.password2 ){
          Toast.info('两次输入的密码不一致！',2);
          console.log(error, value);
          return;
        }else{
          // submit
          value.phone = value.phone.replace(/\s+/g, "");
          let formData = new FormData();
          formData.append("companyName",value.companyName);
          formData.append("phone",value.phone);
          formData.append("smscode",value.smscode);
          formData.append("password",value.password);
          formData.append("account",value.phone);
          formData.append("email","test@qq.com");
          if( typeof(value.inviteCode)!=="undefined" ){
            formData.append("inviteCode",value.inviteCode);
          }
          fetch('http://58.220.10.23:8001/api/user/register', {
        	  method: 'POST', credentials: 'include', body: formData,
      	   }).then(response => response.json())
      	   .then(data=>{
             if( data.status==0 ){
               Toast.success('恭喜您，注册成功！', 2);
               this.props.history.push('applyLogin');
             }else{
               Toast.fail(data.errorMsg, 2);
             }
      	   })
        }
      }
      //console.log(error);
    });
  }


  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <List>
          <Flex>
            <p className="title">公司注册</p>
          </Flex>
          <InputItem
            {...getFieldProps('companyName',{rules: [{required: true}]})}
            placeholder="请输入公司名称"
            clear
          ></InputItem>
          <Flex>
            <Flex.Item className="phoneForIden">
              <InputItem
                {...getFieldProps('phone',{rules: [{required: true}]} )}
                type="phone"
                placeholder="请输入手机号"
                clear
                moneyKeyboardAlign="left"
              ></InputItem>
            </Flex.Item>
            <Flex.Item className="idenBtn">
              <Button type="ghost" size="small" onClick={this.idencode} className="orange-border orange-txt">获取验证码</Button>
            </Flex.Item>
          </Flex>
          <InputItem
            {...getFieldProps('smscode',{rules: [{required: true}]} )}
            placeholder="请输入验证码"
            clear
          ></InputItem>
          <InputItem
            {...getFieldProps('email',{rules: [{required: true}]} )}
            placeholder="请输入邮箱"
            clear
          ></InputItem>
          <InputItem
            {...getFieldProps('password',{rules: [{required: true}]} )}
            type="password"
            placeholder="请输入密码"
            clear
          ></InputItem>
          <InputItem
            {...getFieldProps('password2',{rules: [{required: true}]} )}
            type="password"
            placeholder="请再次输入密码"
            clear
          ></InputItem>
          <InputItem
            {...getFieldProps('inviteCode')}
            placeholder="请输入邀请码（选填）"
            clear
          ></InputItem>
          <List.Item>
            <Button type="primary" onClick={this.regBorrow} className="orange-bg orange-border" style={{border: "1px solid #f17d59" }}>确定</Button>
          </List.Item>
        </List>
      </div>
    );
  }
}
const _companyReg = createForm()(companyReg);
export default _companyReg;
